<template>
  <view class="ar-collection-container">
    <kivicube-collection
      class="kivicube"
      :collection-id="collectionId"
      @ready="onReady"
      @sceneReady="onSceneReady"
      @downloadAssetStart="onDownloadStart"
      @downloadAssetProgress="onDownloadProgress"
      @downloadAssetEnd="onDownloadEnd"
      @loadSceneStart="onLoadStart"
      @loadSceneEnd="onLoadEnd"
      @sceneStart="onSceneStart"
      @photo="onPhoto"
      @error="onError" />
  </view>
</template>

<script lang="ts" setup>
import { ref, onUnmounted } from 'vue';
import { onLoad } from '@dcloudio/uni-app';

// 合辑配置
const collectionId = ref<string>('35uaya'); // 默认合辑ID，可以从接口获取
const license = ref<string>(
  'ac25163c5062bfa1c18da02b0041aa750d3c46c564cb3a27a8cf511258822e7202b00694ccc5bcee66d743d68f71bd5ecf1540ca68d337d40fc71d744a358ced'
); // License用于去除水印

// 页面参数
const pointId = ref<string>('');

/**
 * 合辑准备就绪
 */
const onReady = () => {
  console.log('AR合辑准备就绪');
};

/**
 * 场景准备就绪
 */
const onSceneReady = () => {
  console.log('场景准备就绪');
};

/**
 * 资源下载开始
 */
const onDownloadStart = () => {
  console.log('资源下载开始');
};

/**
 * 资源下载进度
 */
const onDownloadProgress = (event: any) => {
  const progress = event.detail;
  console.log('资源下载进度:', progress);
};

/**
 * 资源下载结束
 */
const onDownloadEnd = () => {
  console.log('资源下载结束');
};

/**
 * 场景加载开始
 */
const onLoadStart = () => {
  console.log('场景加载开始');
};

/**
 * 场景加载结束
 */
const onLoadEnd = () => {
  console.log('场景加载结束');
};

/**
 * 场景启动
 */
const onSceneStart = () => {
  console.log('场景启动');
  uni.showToast({
    title: '可开始体验场景',
    icon: 'none',
    duration: 2000,
  });
};

/**
 * 拍照
 */
const onPhoto = (event: any) => {
  const photoPath = event.detail;
  console.log('拍照成功:', photoPath);
  uni.saveImageToPhotosAlbum({
    filePath: photoPath,
    success: () => {
      uni.showToast({
        title: '保存照片成功',
        icon: 'success',
      });
    },
    fail: err => {
      console.error('保存照片失败', err);
      uni.showToast({
        title: '保存照片失败',
        icon: 'none',
      });
    },
  });
};

/**
 * 错误处理
 */
const onError = (event: any) => {
  const detail = event.detail;
  console.error('AR合辑错误:', event);

  // 如果是摄像头权限问题
  if (detail && detail.isCameraAuthDenied) {
    uni.showModal({
      title: '提示',
      content: '请给予"摄像头"权限',
      success: res => {
        if (res.confirm) {
          uni.openSetting({
            success: settingRes => {
              const authSetting = settingRes.authSetting;
              if (authSetting['scope.camera']) {
                // 权限已授予，重新加载页面
                uni.reLaunch({
                  url: '/pages/ar/ar-collection',
                });
              } else {
                uni.showToast({
                  title: '获取"摄像头"权限失败！',
                  icon: 'none',
                });
              }
            },
            fail: () => {
              uni.showToast({
                title: '打开设置失败',
                icon: 'none',
              });
            },
          });
        }
      },
    });
  }
};

/**
 * 页面加载
 */
onLoad((options: any) => {
  console.log('AR合辑页面加载，参数:', options);
  if (options?.point_id) {
    pointId.value = options.point_id;
    // 可以根据point_id获取对应的合辑ID
    // fetchCollectionId(options.point_id);
  }
  if (options?.collection_id) {
    collectionId.value = options.collection_id;
  }
});

/**
 * 页面卸载
 */
onUnmounted(() => {
  console.log('AR合辑页面卸载');
});
</script>

<style lang="scss" scoped>
.ar-collection-container {
  width: 100vw;
  height: 100vh;
  position: relative;
  overflow: hidden;
}

.kivicube {
  display: block;
  width: 100%;
  height: 100%;
}
</style>
